<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
      body {
        background-color: #f5f5f5;
      }

      #main {
        width: 1000px;
        height: 800px;
        margin: 50px auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>

  <body>
  <div id="main"></div>
  <script>
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
      title: {
        text: '复杂 Echarts 混合图表示例',
        left: 'center',
        top: 20,
        textStyle: {
          color: '#333',
          fontSize: 24
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var res = params[0].name + '<br/>';
          params.forEach(function (item) {
            res += item.seriesName + ': ' + item.value + '<br/>';
          });
          return res;
        }
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 'middle',
        data: ['系列 1（折线图）', '系列 2（柱状图）', '系列 3（散点图）']
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 14
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 14
        }
      },
      series: [
        {
          name: '系列 1（折线图）',
          type: 'line',
          data: [120, 150, 130, 160, 140, 170, 155],
          itemStyle: {
            color: '#4c9be8'
          },
          lineStyle: {
            width: 3
          }
        },
        {
          name: '系列 2（柱状图）',
          type: 'bar',
          data: [80, 90, 100, 110, 120, 130, 140],
          barWidth: '60%',
          itemStyle: {
            color: '#77c156'
          }
        },
        {
          name: '系列 3（散点图）',
          type: 'scatter',
          data: [
            [1, 85],
            [2, 95],
            [3, 105],
            [4, 115],
            [5, 125],
            [6, 135],
            [7, 145]
          ],
          symbolSize: 10,
          itemStyle: {
            color: '#ff9933'
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        },
        {
          type: 'slider',
          show: true,
          y: 'bottom',
          start: 0,
          end: 100
        }
      ]
    };

    myChart.setOption(option);

    // 添加交互事件
    myChart.on('click', function (params) {
      if (params.componentType === 'series') {
        alert('你点击了系列：' + params.seriesName + '，数据值为：' + params.value);
      }
    });
  </script>
  </body>
</html>